<template>
  <div class="potree_container" ref="container">
    <div id="potree_render_area" style="width:100%; height:100%;"></div>
    <div id="potree_sidebar_container"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as THREE from 'three'

const container = ref(null)

// 检查Potree是否已加载
const checkPotreeLoaded = () => {
  return new Promise((resolve) => {
    const check = () => {
      if (window.Potree) {
        resolve()
      } else {
        setTimeout(check, 100)
      }
    }
    check()
  })
}

// 初始化Potree
const initPotree = () => {
  try {
    // 确保容器尺寸
    container.value.style.width = '100%'
    container.value.style.height = '100%'
    container.value.style.position = 'absolute'
    container.value.style.left = '0'
    container.value.style.top = '0'

    window.viewer = new Potree.Viewer(
      document.getElementById('potree_render_area')
    )

    // 基本配置
    viewer.setEDLEnabled(true)
    viewer.setFOV(60)
    viewer.setPointBudget(2_000_000)
    viewer.loadSettingsFromURL()
    
    viewer.setDescription(
      'input occTree'
    )

    // 加载GUI
viewer.loadGUI(() => {
  viewer.setLanguage('en')
  showNextSibling('menu_tools')
})

    // 加载点云
    Potree.loadPointCloud(
      '/proxy/mschuetz/potree/resources/pointclouds/surface_and_edge/land_building/cloud.js',
      'Lake Tahoe',
      (e) => {
        const scene = viewer.scene
        const pointcloud = e.pointcloud

        const material = pointcloud.material
        material.size = 1
        material.pointSizeType = Potree.PointSizeType.ADAPTIVE
        material.shape = Potree.PointShape.SQUARE
        material.activeAttributeName = 'elevation'

        scene.addPointCloud(pointcloud)

        // 设置相机位置
        scene.view.position.set(10.66, 50.63, 29.3)
        scene.view.lookAt(new THREE.Vector3(13.21, -1.07, 0.97))
      }
    )
  } catch (error) {
    console.error('初始化Potree失败:', error)
  }
}

onMounted(async () => {
  // 等待Potree加载完成
  await checkPotreeLoaded()
  initPotree()
})
</script>

<style scoped>
.potree_container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
#potree_render_area canvas {
  left: 1px!important;
 
}
#potree_render_area :deep(canvas) {
  left: 1px;
  position: relative;
}

</style>
